<h2>Dialog Instance</h2>

<h4>Call the show function to show an dialog</h4>
<pre>BootstrapDialog.show();</pre>
<p><button type="button" class="btn btn-primary open-dialog" data-name="simple">Show Dialog</button></p>
<p>&nbsp;</p>

<h4>Define title and content of the dialog</h4>
<pre>BootstrapDialog.show({
  title: 'Hello Dialog',
  message: '&lt;div class="alert alert-info"&gt;I am a dialog&lt;/div&gt;'
});</pre>
<p><button type="button" class="btn btn-primary open-dialog" data-name="with-option">Show Dialog</button></p>
<p>&nbsp;</p>

<h4>Define type of the dialog</h4>
<pre>BootstrapDialog.show({
  title: 'Hello Dialog',
  message: 'I am a dialog',
  type: BootstrapDialog.TYPE.INFO
});</pre>
<p><button type="button" class="btn btn-primary open-dialog" data-name="with-type">Show Dialog</button></p>
<p>&nbsp;</p>

<h4>Define backdrop with false to avoid closing when click outside the dialog</h4>
<pre>BootstrapDialog.show({
  title: 'Hello Dialog',
  message: 'I am a dialog',
  backdrop: false
});</pre>
<p><button type="button" class="btn btn-primary open-dialog" data-name="with-backdrop">Show Dialog</button></p>
<p>&nbsp;</p>

<h4>Define width of the dialog</h4>
<pre>BootstrapDialog.show({
  title: 'Hello Dialog',
  message: 'I am a dialog',
  width: '60%'
});</pre>
<p><button type="button" class="btn btn-primary open-dialog" data-name="with-width">Show Dialog</button></p>
<p>&nbsp;</p>

<h4>Define Buttons</h4>
<p>More button options, see <a href="#button-option">Button</a></p>
<pre>var options = {
  title: 'Please Choose',
  message: 'What is your sex?',
  type: BootstrapDialog.TYPE.PRIMARY,
  buttons: [{
    label: 'MALE',
    action: function(self, dialog) {
      BootstrapDialog.alert('You are male', function() {
        dialog.close();
      });
    }
  }, {
    label: 'FEMALE',
    type: BootstrapDialog.TYPE.DEFAULT,
    action: function(self, dialog) {
      BootstrapDialog.alert('You are female', function() {
        dialog.close();
      });
    }
  }, {
    label: 'UNKNOWN',
    type: BootstrapDialog.TYPE.DANGER,
    action: function(self, dialog) {
      dialog.close();
    }
  }]
};
BootstrapDialog.show(options);</pre>
<p><button type="button" class="btn btn-primary open-dialog" data-name="with-buttons">Show Dialog</button></p>
<p>&nbsp;</p>

<h4>Define events</h4>
<pre>var options = {
  title: 'Hello Dialog',
  message: '&lt;div class="alert alert-info"&gt;&lt;/div&gt;',
  onShow: function(dialog) {
    dialog.getModalBody().find('.alert').append('&lt;p&gt;show&lt;/p&gt;');
  },
  onShown: function(dialog) {
    dialog.getModalBody().find('.alert').append('&lt;p&gt;shown&lt;/p&gt;');
  }
};
BootstrapDialog.show(options);</pre>
<p><button type="button" class="btn btn-primary open-dialog" data-name="with-event">Show Dialog</button></p>
<blockquote>getModalBody() is a method of the dialog. More methods, see <a href="#methods">Methods</a></blockquote>
<p>&nbsp;</p>

<h3>Options:</h3>
<table class="table">
  <thead>
  <tr>
    <th>Name</th><th>Type</th><th>Default</th><th>Description</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>title</td>
    <td>string</td>
    <td>'Title'</td>
    <td>Title of the dialog</td>
  </tr>
  <tr>
    <td>message</td>
    <td>string or HtmlElement</td>
    <td>''</td>
    <td>Content of the modal body</td>
  </tr>
  <tr>
    <td>cssClass</td>
    <td>string</td>
    <td>''</td>
    <td>CSS class name is added to the dialog</td>
  </tr>
  <tr>
    <td>type</td>
    <td>string</td>
    <td>BootstrapDialog.TYPE.DEFAULT</td>
    <td></td>
  </tr>
  <tr>
    <td>width</td>
    <td>string</td>
    <td>''</td>
    <td>define width of the dialog</td>
  </tr>
  <tr>
    <td>autodestroy</td>
    <td>boolean</td>
    <td>true</td>
    <td>the dialog element would be removed from the page when closed if true</td>
  </tr>
  <tr>
    <td>backdrop</td>
    <td>boolean</td>
    <td>true</td>
    <td>if true, click outside will close the dialog</td>
  </tr>
  <tr>
    <td>keyboard</td>
    <td>boolean</td>
    <td>true</td>
    <td>if true, press ESC will close the dialog</td>
  </tr>
  <tr>
    <td>buttons</td>
    <td>Array</td>
    <td>
<pre>[{
  label: 'Close',
  type: BootstrapDialog.TYPE.DEFAULT,
  action: function(self, context) {
    context.close();
  }
}]</pre>
    </td>
    <td>Refer to the <a href="#button-option">buttonOption</a></td>
  </tr>
  <tr>
    <td>onShow</td>
    <td>Function</td>
    <td>null</td>
    <td>
      <p><code>function(dialog) {...}</code></p>
      <p>This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event.</p>
    </td>
  </tr>
  <tr>
    <td>onShown</td>
    <td>Function</td>
    <td>null</td>
    <td>
      <p><code>function(dialog) {...}</code></p>
      <p>This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the relatedTarget property of the event.</p>
    </td>
  </tr>
  <tr>
    <td>onHide</td>
    <td>Function</td>
    <td>null</td>
    <td>
      <p><code>function(dialog) {...}</code></p>
      <p>This event is fired immediately when the hide instance method has been called.</p>
    </td>
  </tr>
  <tr>
    <td>onHidden</td>
    <td>Function</td>
    <td>null</td>
    <td>
      <p><code>function(dialog) {...}</code></p>
      <p>This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).</p>
    </td>
  </tr>
  <tr>
    <td>onLoaded</td>
    <td>Function</td>
    <td>null</td>
    <td>
      <p><code>function(dialog) {...}</code></p>
      <p>This event is fired when the modal has loaded content using the remote option.</p>
      <p>Not support yet.</p>
    </td>
  </tr>
  </tbody>
</table>
<h3 id="methods">Methods:</h3>
<table class="table">
  <thead>
  <tr>
    <th>Name</th>
    <th>Return</th>
    <th>Description</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>open()</td>
    <td>The dialog instance</td>
    <td>The dialog will be appended to body, and shows on the screen</td>
  </tr>
  <tr>
    <td>close()</td>
    <td>The dialog instance</td>
    <td>The dialog will be hidden from the screen</td>
  </tr>
  <tr>
    <td>setTitle(title)</td>
    <td>The dialog instance</td>
    <td>update the title of the dialog with the argument 'title'</td>
  </tr>
  <tr>
    <td>getTitle()</td>
    <td>The dialog title as string</td>
    <td></td>
  </tr>
  <tr>
    <td>setMessage(message)</td>
    <td>The dialog instance</td>
    <td>Update the content of the dialog with the argument 'message', it could be a string or HTMLElement</td>
  </tr>
  <tr>
    <td>getModalTitle()</td>
    <td>HTMLElement</td>
    <td>Get the '.modal-title' of the dialog</td>
  </tr>
  <tr>
    <td>getModalHeader()</td>
    <td>HTMLElement</td>
    <td>Get the '.modal-header' of the dialog</td>
  </tr>
  <tr>
    <td>getModalBody()</td>
    <td>HTMLElement</td>
    <td>Get the '.modal-body' of the dialog</td>
  </tr>
  <tr>
    <td>getModalFooter()</td>
    <td>HTMLElement</td>
    <td>Get the '.modal-footer' of the dialog</td>
  </tr>
  <tr>
    <td>getButtonList()</td>
    <td>Array</td>
    <td>
      The buttons in the modal footer, the element of the Array is a button view.
    </td>
  </tr>
  </tbody>
</table>